<template>
	<div class="content-page">
		<div class="content-nav">
			<el-breadcrumb class="breadcrumb" separator="/">
				<el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>视频管理</el-breadcrumb-item>
				<el-breadcrumb-item>视频列表</el-breadcrumb-item>
			</el-breadcrumb>
			<div class="operation-nav">
				<router-link to="/dashboard/goods/add">
					<el-button type="primary" icon="plus">上传视频</el-button>
				</router-link>
			</div>
		</div>
		<div class="content-main">
			<div class="filter-box">
				<el-form :inline="true" :model="filterForm" class="demo-form-inline">
					<el-form-item label="视频名称">
						<el-input v-model="filterForm.videoName" placeholder="请输入视频名称"></el-input>
					</el-form-item>
					<el-form-item label="视频分类">
						<el-select v-model="filterForm.categoryId" placeholder="请选择分类">
							<el-option :label="item.category" :value="item.categoryId" v-for="(item,index) in categoryList"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="显示状态">
						<el-select v-model="filterForm.status" placeholder="请选择状态">
							<el-option label="显示" :value="1"></el-option>
							<el-option label="隐藏" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmitFilter">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="form-table-box">
				<el-table ref="multipleTable" :data="tableData" style="width: 100%" border stripe @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="id" label="ID" width="100">
					</el-table-column>
					<el-table-column prop="videoName" label="视频名称">
					</el-table-column>
					<el-table-column prop="category" label="所属分类">
					</el-table-column>
					<el-table-column label="封面">
						<template scope="scope">
							<el-image style="width: 100px; height: 100px" :src="scope.row.showImage">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column label="封面显示">
						<template scope="scope">
							{{ scope.row.showMode == 2? '大图' : scope.row.showMode==1?'小图':'无图' }}
						</template>
					</el-table-column>
					<el-table-column label="显示状态" width="80">
						<template scope="scope">
							{{ scope.row.status == 1 ? '显示' : '隐藏' }}
						</template>
					</el-table-column>
					<el-table-column label="是否推荐" width="80">
						<template scope="scope">
							{{ scope.row.recommendFlag == 1 ? '是' : '否' }}
						</template>
					</el-table-column>
					<el-table-column prop="playTimes" label="播放次数" width="80">
					</el-table-column>
					<el-table-column prop="sorting" label="排序" width="80">
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template scope="scope">
							<el-button size="small" @click="handleRowEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="small" type="danger" @click="handleRowDelete(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page-box flex">
				<div class="page-box-l">
					<el-button @click="toggleSelection(1)">批量删除</el-button>
					<el-button @click="toggleSelection(2)">取消选择</el-button>
				</div>
				<div class="flex-1">
					<el-pagination @current-change="handlePageChange" :current-page="page" :page-size="20" layout="total, prev, pager, next, jumper"
					 :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getVideoList,
		getCategoryList,
		delVideo
	} from '@/api/permission'
	export default {
		data() {
			return {
				categoryList: [],
				page: 0,
				total: 0,
				filterForm: {
					videoName: '',
					categoryId: '',
					status: ''
				},
				tableData: [],
				multipleSelection: []
			}
		},
		methods: {
			handlePageChange(val) {
				this.page = val-1;
				//保存到localStorage
				this.getList()
			},
			handleRowEdit(index, row) {
				this.$router.push({
					name: 'goods_add',
					query: {
						id: row.id
					}
				})
			},
			handleRowDelete(categoryIdLists) {
				this.$confirm('确定要删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delVideo({
						id: categoryIdLists
					}).then((response) => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.page = 0
						this.getList();
					})
				});
			},
			onSubmitFilter() {
				this.page = 0
				this.getList()
			},
			getList() {
				getVideoList({
					index: this.page,
					name: this.filterForm.name,
					videoName: this.filterForm.videoName,
					categoryId: this.filterForm.categoryId,
					status: this.filterForm.status,
					size: 20,
				}).then((response) => {
					this.tableData = response.content
					this.page = response.currentPage + 1
					this.total = response.totalRecords
				})
			},
			getCategoryListFun() {
				let self = this
				getCategoryList({
					index: 0,
					size: 99
				}).then(res => {
					self.categoryList = res.content
				})
			},
			toggleSelection(type) {
				let rows = this.multipleSelection
				if (type==1&&rows.length) {
					let categoryIdLists = ''
					rows.forEach(row => {
						if (row) {
							categoryIdLists = categoryIdLists + row.id + ','
						}
					});
					this.handleRowDelete(categoryIdLists)
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		},
		mounted() {
			this.getCategoryListFun();
			this.getList();
		}
	}
</script>

<style scoped>

</style>
